import Taro, {Component} from "@tarojs/taro";
import {View, ScrollView, Text} from "@tarojs/components";
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'

import {getRuntime,technicalTitleArr,typeOfJobArr,majorTypeArr } from '../../utils/common'

import './index.less'

// 工程人才中心
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Personnel extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    technicalTitleArr: technicalTitleArr, // 职称
    allProvince: [], // 省
    majorTypeArr, //  专业类别
    typeOfJobArr, // 工作类型
    currentNavId: 0
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'工程人才中心' })
   this.getAllProvince()
  }

  getAllProvince() { let { AreaStore } = this.props.stores
    AreaStore.getAllProvinceFromLocal({
      callBack: res => {
        this.setState({
          allProvince:res
        }, () => {
        })
      }
    })
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }
  changeNav(currentNavId:number) {
    this.setState({
      currentNavId
    })
  }
  render() {
    let { currentNavId,technicalTitleArr,allProvince } = this.state
    return (
      <View className='personnel-index'>
        <ScrollView className='scroll-view-nav' scrollX={ true }>
          <View className={currentNavId === 0 ? 'scroll-item scroll-item-on' : 'scroll-item'} onClick={this.changeNav.bind(this,0)}>人才库<Text className='line' /></View>
          <View className={currentNavId === 1 ? 'scroll-item scroll-item-on' : 'scroll-item'} onClick={this.changeNav.bind(this,1)}>招聘信息<Text className='line' /></View>
        </ScrollView>

        <View className='interval' />

        <View className='select-option'>
          <View className='option-item'>
            <View className='option all option-active'>全部</View>
            <ScrollView
              className='scrollview'
              scrollX
              scrollWithAnimation
              onScroll={this.onScroll}
            >
              {
                technicalTitleArr.map(item => {
                  return(
                    <View className='option' key={item}>{item}</View>
                  )
                })
              }
            </ScrollView>
          </View>
          <View className='option-item'>
            <View className='option all option-active'>全部</View>
            <ScrollView
              className='scrollview'
              scrollX
              scrollWithAnimation
              onScroll={this.onScroll}
            >
              {
                allProvince.map(item => {
                  return(
                    <View className='option' key={item.value}>{item.label}</View>
                  )
                })
              }
            </ScrollView>
          </View>
          <View className='option-item'>
            <View className='option all option-active'>全部</View>
            <ScrollView
              className='scrollview'
              scrollX
              scrollWithAnimation
              onScroll={this.onScroll}
            >
              <View className='option'>建筑</View>
              <View className='option'>公路</View>
              <View className='option'>铁路</View>
              <View className='option'>民航机厂</View>
              <View className='option'>港口与航道</View>
            </ScrollView>
          </View>
          <View className='option-item'>
            <View className='option all option-active'>全部</View>
            <ScrollView
              className='scrollview'
              scrollX
              scrollWithAnimation
              onScroll={this.onScroll}
            >
              <View className='option'>挂职</View>
              <View className='option'>全职</View>
              <View className='option'>兼职</View>
            </ScrollView>
          </View>

        </View>

        <View className='interval' />

        <View className='list-06'>
          <View className='list-06-item' onClick={this.handelRouter.bind(this, '/pages/personnel/detail')}>
            <View className='item-title'>
              <View className='title'>
                昆明高薪招聘二级建造师
                <Text className='label'>全职</Text>
              </View>
              <View className='address'>云南-昆明</View>
            </View>
            <View className='item-info'>
              <View className='info'>
                <Text className='op'>面议</Text>
                <Text className='i'>大专</Text>
                <Text className='i'>5年</Text>
                <Text className='i'>大专</Text>
                <Text className='i'>大专</Text>
              </View>
              <View className='btn-view'>
                查看
              </View>
            </View>
          </View>

          <View className='list-06-item'>
            <View className='title'>
              昆明高薪招聘二级建造师
              <Text className='label'>全职</Text>
            </View>
            <View className='item-info'>
              <View className='info'>
                <Text className='op'>面议</Text>
                <Text className='i'>大专</Text>
                <Text className='i'>5年</Text>
                <Text className='i'>大专</Text>
                <Text className='i'>大专</Text>
              </View>
              <View className='btn-view'>
                查看
              </View>
            </View>
          </View>

          <View className='list-06-item'>
            <View className='item-title'>
              <View className='title'>
                昆明高薪招聘二级建造师
                <Text className='label'>全职</Text>
              </View>
              <View className='address'>云南-昆明</View>
            </View>
            <View className='item-info'>
              <View className='info'>
                <Text className='op'>面议</Text>
                <Text className='i'>大专</Text>
                <Text className='i'>5年</Text>
                <Text className='i'>大专</Text>
                <Text className='i'>大专</Text>
              </View>
              <View className='btn-view'>
                查看
              </View>
            </View>
          </View>
        </View>

        <View className='footer-personnel'>
          <View className='btn btn1' onClick={this.handelRouter.bind(this, '/pages/index/position')}>发布职位</View>
          <View className='btn btn2' onClick={this.handelRouter.bind(this, '/pages/index/rresume')}>填写简历</View>
        </View>
      </View>
    )
  }
}

export default Personnel
